<template>
  <div class="workbench-wrapper">
    <container-box :metaTitle="routeMeta.title || ''">
      <div slot="container">
         <div class="baseDetail">
        <div class="header">
            <span class="headName">两列详情展示</span>
        </div>
        <Row :formData="formData"/>
        <div class="empbar"></div>

         <div class="header">
            <span class="headName">三列详情展示</span>
        </div>
        <Row :formData="trRowFormData"/>
        <div class="foot">
            <span class="footText">
                Copyright  2020 58同城用户体验设计中心
            </span>
        </div>
    </div>
      </div>
      <mds-card slot="info" class="mds-card" style="width: 280px" :loading="true">
        <div slot="header">
          <span>{{ routeMeta.title || '' }}</span>
        </div>
          <div v-for="o in 4" :key="o" class="text item">
            {{'列表内容 ' + o }}
          </div>
      </mds-card>
    </container-box>
  </div>
</template>

<script>
import ContainerBox from '@/components/ContainerBox'
import Row from '@/components/baseDetail/TwoRowDetail'

export default {
  data() {
    return {
      formData: [{
        label: '姓   名：',
        value: '经纬（jingwei01）',
        color: '',
        pop: '50%',
        flag: false
      }, {
        label: '申请部门：',
        value: '设计部',
        color: '',
        pop: '50%',
        flag: false
      }, {
        label: '获得时间：',
        value: '2019-02-02',
        color: '',
        pop: '50%',
        flag: false
      }, {
        label: '填报日期：',
        value: '2020-02-02 至 2020-02-21',
        color: '',
        pop: '50%',
        flag: false
      }, {
        label: '超过五个字折行最多…',
        value: '北京市朝阳酒仙桥北路',
        color: '',
        pop: '50%',
        flag: false
      }, {
        label: '工作城市：',
        value: '未填写',
        color: '',
        pop: '50%',
        flag: false
      }, {
        label: '任务状态：',
        value: '进行中',
        color: '',
        pop: '50%',
        flag: false
      }, {
        label: '申请部门：',
        value: '设计部',
        color: '',
        pop: '50%',
        flag: false
      }, {
        label: '卖家手机：',
        value: '13800138000',
        color: '',
        pop: '50%',
        flag: false
      }, {
        label: '填报日期：',
        value: '2020-02-02',
        color: '',
        pop: '50%',
        flag: false
      }, {
        label: '公司地址：',
        value: '北京市朝阳酒仙桥北路',
        color: '',
        pop: '50%',
        flag: false
      }, {
        label: '工作城市：',
        value: '北京市',
        color: '',
        pop: '50%',
        flag: false
      }, {
        label: '商户名称：',
        value: '北京世纪二手车',
        color: '',
        pop: '50%',
        flag: false
      }, {
        label: '填报日期：',
        value: '2020-02-02',
        color: '',
        pop: '50%',
        flag: false
      }, {
        label: '身份证号：',
        value: '110100199303220025',
        color: '',
        pop: '50%',
        flag: false
      }, {
        label: '工作城市：',
        value: '北京市',
        color: '',
        pop: '50%',
        flag: false
      }, {
        label: '照片：',
        value: '北京市',
        color: '',
        pop: '50%',
        img_list: [1, 2, 3, 4, 5, 6, 7, 8],
        height: '80px',
        width: '80px',
        flag: true
      }, {
        label: '身份证正面：',
        value: '北京市',
        color: '',
        pop: '50%',
        img_list: ['/assets/上传之后的图片备份.png'],
        flag: true
      }, {
        label: '备注信息：',
        value: '这是一个备注，内容很长很长这是一个备注，内容很长很长这是一个备注，内容很长很长这是一个备注，内容很长很长这是一个备注，内容很长很长这是一个备注，内容很长很长这是一个备注，内容很长很长这是一个备注，内容很长很长',
        color: '',
        pop: '100%',
        flag: false
      }],
      trRowFormData: [{
        label: '姓     名：',
        value: '经纬（jingwei）',
        color: '',
        pop: '33%',
        flag: false
      }, {
        label: '出生年月:',
        value: '2018-04',
        color: '',
        pop: '33%',
        flag: false
      }, {
        label: '最高学历:',
        value: '本科',
        color: '',
        pop: '33%',
        flag: false
      }, {
        label: '所属部门：',
        value: '商业智能中心-企业平台-产品部',
        color: '',
        pop: '33%',
        flag: false
      }, {
        label: '所属部门：',
        value: '商业智能中心-企业平台-产品部',
        color: '',
        pop: '33%',
        flag: false
      }, {
        label: '主      管:',
        value: '经纬（jingwei）',
        color: '',
        pop: '33%',
        flag: false
      }, {
        label: '入职时间：',
        value: '2018-04-03',
        color: '',
        pop: '33%',
        flag: false
      }, {
        label: '当前职级：',
        value: 'P5',
        color: '',
        pop: '33%',
        flag: false
      }, {
        label: '晋升时间:',
        value: '2018-04-03',
        color: '',
        pop: '33%',
        flag: false
      }, {
        label: '参评方向：',
        value: '产品设计',
        color: '',
        pop: '33%',
        flag: false
      }, {
        label: '目标职级：',
        value: 'P5',
        color: '',
        pop: '33%',
        flag: false
      }
      ]
    }
  },
  components: {
    ContainerBox,
    Row
  },
  computed: {
    routeMeta() {
      return this.$route.meta || {}
    }
  }
}
</script>
<style lang="scss" scoped>
.workbench-wrapper {
  width: 100%;
  height: 100%;
}
    .baseDetail{
       background:rgba(240,242,245,1);
       width: 100%;
        border-radius:4px;
    //    padding: 25px 24px 0 24px;
        .header{
            display: flex;
            background:rgba(255,255,255,1);
            justify-content: flex-start;
            justify-items: center;
            align-items: center;
            height: 56px;
            border-bottom: 1px solid rgba(240,242,245,1);
            .headName{
                display: flex;
                justify-content: center;
                justify-items: center;
                height:24px;
                font-size:16px;
                font-family:PingFangSC-Medium,PingFang SC;
                font-weight:500;
                color:rgba(53,64,82,1);
                line-height:24px;
                padding-left: 24px;
            }
        }
        .empbar{
            height: 24px;
        }
        .foot{
            height: 69px;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            .footText{
                font-size:14px;
                font-family:PingFangSC-Regular,PingFang SC;
                font-weight:400;
                color:rgba(127,143,164,1);
                line-height:22px;
            }
        }
    }
</style>
